<template>
	<view>
		<view class="bg">
			{{order_status[orderList.status]}}
		</view>
		<view class="order">
			<!-- 收货地址 -->
			<view class="order_address">
				<image src="/static/images/home/bottom.png"></image>
				<view class="address_box">
					<view class="weizhi_icon">
						<text class="iconfont icon-dizhi" :style="'color:' + colors"></text>
					</view>
					<block>
						<view class="center">
							<view class="name">
								<text class="text1">{{orderList.name}}</text>
								<text class="phones">{{orderList.phone}}</text>
							</view>
							<view class="address_name">{{orderList.address}}1</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 商品详情 -->
			<view v-for="(item, index) in suborder" :key="index" class="goods">
				<view class="goods_data">
					<image :src="item.attribute_info.img_src |getImg"></image>
					<view class="goods_title">
						<view class="g_name">
							{{item.goods_info.name}}
						</view>
						<view class="goods_sku">
							规格: {{item.attribute_info.attribute_name}}
						</view>
						<view class="price">
							<view class="t1">￥{{item.attribute_info.price}}</view>
							<view class="t3">
								x{{item.num}}
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 订单详情 -->
			<view class="order_more">
				<view class="morelist">
					<text class="title">商品总价</text>
					<view class="right_title">
						￥{{orderList.pay_amount}}
					</view>
				</view>
				<view class="morelist">
					<view class="title">
						<text class="quan" style="background:#fa436a">运</text>
						<text>运费</text>
					</view>
					<view class="right_title">
						￥{{Number(orderList.postage)}}
					</view>
				</view>
				<view class="morelist">
					<text class="title">实付款</text>
					<view class="right_title">
						￥{{orderList.pay_amount}}
					</view>
				</view>
				<view class="morelist">
					<text class="title">订单编号</text>
					<view class="right_title">
						{{orderList.order_id}}
						<text class="copy" @click="onCopy(orderList.order_id)">复制</text>
					</view>
				</view>
				<view class="morelist">
					<text class="title">支付方式</text>
					<view class="right_title" v-if="orderList.status == 0">
						待支付

					</view>
					<view class="right_title" v-else>
						{{payType[orderList.pay_type]}}

					</view>
				</view>
				<view class="morelist">
					<text class="title">创建时间</text>
					<view class="right_title">
						{{orderList.add_time | formatTime}}
					</view>
				</view>
				<view class="morelist" v-if="orderList.pay_time">
					<text class="title">支付时间</text>
					<view class="right_title">
						{{orderList.pay_time | formatTime}}
					</view>
				</view>
				<view class="morelist" v-if="orderList.express_time">
					<text class="title">发货时间</text>
					<view class="right_title">
						{{orderList.express_time | formatTime}}
					</view>
				</view>
				<view class="morelist" v-if="orderList.receive_time">
					<text class="title">完成时间</text>
					<view class="right_title">
						{{orderList.receive_time | formatTime}}
					</view>
				</view>
				<view class="tips">
					<view class="tips_name">备注信息</view>
					<view class="textarea_box">
						<textarea placeholder="无备注信息" disabled="true" placeholder-class="font-size: 24upx"
							maxlength="-1" v-model="orderList.tips"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderDetail
	} from "@/api/api.js"
	var app = getApp();
	export default {
		data() {
			return {
				colors: '#fa436a',
				status: 0,
				//订单状态
				isShow: true,
				orderList: {},
				suborder: [],
				payType: [],
				order_status: []
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.OrderDetail(options.id)
		},

		methods: {
			OrderDetail(id) {
				OrderDetail({
					order_id: id
				}).then(res => {
					this.orderList = res.data.order
					this.suborder = res.data.suborder
					this.suborder.forEach(item => {
						item.attribute_info = JSON.parse(item.attribute_info)
						item.goods_info = JSON.parse(item.goods_info)
					})
					this.payType = res.data.pay_type
					this.order_status = res.data.order_status
					console.log(this.suborder);
				})
			},
			onCopy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #0F172A;
	}

	.bg {
		text-align: center;
		height: 60px;
		line-height: 60px;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(45deg, #798AD6, #8980FD, #798AD6);
	}

	.order {
		padding: 20upx 2%;
	}

	.mode {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		background-color: #1E293B;
		padding: 0 20upx;
		border-radius: 10upx;
		align-items: center;
		margin-bottom: 20upx;
	}

	.mode:active {
		background-color: #f5f5f5;
	}

	.mode .text1 {
		color: #fff;
		font-size: 24upx;
	}

	.mode .text2 {
		font-size: 24upx;
		color: #fff;
		display: block;
		width: 50%;
		font-weight: bold;
	}

	.mode image {
		width: 40upx;
		height: 40upx;
		display: block;
	}

	.order_address {
		height: 150upx;
		width: 100%;
		background-color: #1E293B;
		border-radius: 10upx;
		overflow: hidden;
		position: relative;
		color: #fff;
	}

	.order_address image {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.address_box {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		box-sizing: border-box;
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.weizhi_icon text {
		font-size: 40upx;
		margin-left: 10upx;
	}

	.address_box .center {
		margin-left: 20upx;
	}

	.address_box .center .name {
		height: 60upx;
		line-height: 60upx;
	}

	.address_box .center .name .text1 {
		font-size: 26upx;
		font-weight: bold;
		color: #fff;
		display: inline-block;
		margin-right: 20upx;
	}

	.phones {
		font-size: 24upx;
		color: #fff;
		z-index: 0;
	}

	.address_box .address_name {
		font-size: 26upx;
		font-weight: bold;
		color: #fff;
	}

	.noaddress {
		margin-left: 40upx;
		font-weight: bold;
		color: #fff;
		font-size: 26upx;
	}

	.goods {
		background-color: #1E293B;
		margin-top: 20upx;
		border-radius: 10upx;
		padding: 30upx 20upx;
		padding-bottom: 10upx;
		color: #fff;
	}

	.goods_data {
		width: 100%;
		display: flex;
	}

	.goods_data image {
		min-width: 150upx;
		max-width: 150upx;
		height: 150upx;
		display: block;
		border-radius: 10upx;
	}

	.goods_title {
		margin-left: 20upx;
		line-height: 40upx;
		width: 100%;
	}

	.goods_title .price {
		width: 100%;
		display: flex;
		align-items: center;
		height: 40upx;
		line-height: 40upx;
		margin-top: 20upx;
		position: relative;
	}

	.goods_title .price .t1 {
		font-size: 30upx;
		display: block;
	}

	.goods_title .price .t2 {
		font-size: 24upx;
		margin-left: 15upx;
		display: block;
		color: #999;
	}

	.goods_title .price .t3 {
		float: right;
		font-size: 26upx;
		color: #fff;
		position: absolute;
		right: 0upx;
		top: 0;
	}

	.goods_title .g_name {
		font-size: 26upx;
		font-weight: bold;
		max-height: 80upx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods_title .goods_sku {
		color: #999;
		font-size: 12px;
		/* margin-top: 20upx; */
	}

	.numbers {
		/* text-align: right; */
	}

	.shop {
		margin-top: 20upx;
		font-size: 24upx;
		color: #333;
		display: flex;
		align-content: center;
	}

	.order_more {
		padding: 0 15px;
		margin-top: 20upx;
		background-color: #1E293B;
		border-radius: 10upx;
	}

	.morelist {
		height: 90upx;
		line-height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.morelist .title {
		color: #fff;
		font-size: 26upx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.morelist .title .quan {
		font-size: 20upx;
		width: 35upx;
		height: 35upx;
		line-height: 36upx;
		text-align: center;
		border-radius: 8upx;
		margin-right: 10upx;
		align-items: center;
		color: #fff;
	}

	.morelist .right_title {
		color: #fff;
		font-size: 26upx;
	}

	.morelist .copy {
		font-size: 22upx;
		color: #fff;
		background-color: #8980FD;
		height: 50upx;
		line-height: 50upx;
		padding: 0 20upx;
		border-radius: 10upx;
		margin-left: 20upx;
		display: inline-block;
	}

	.goods_btns {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 10upx;

		.btns {
			font-size: 24upx;
			text-align: center;
			color: #999999;
			padding: 5upx 15upx;
			border-radius: 8upx;
		}
	}

	.tips {
		padding: 10upx 0;
		margin-bottom: 120upx;
		padding-bottom: 20upx;
	}

	.tips .tips_name {
		font-size: 26upx;
		font-weight: bold;
		line-height: 60upx;
		margin-bottom: 10px;
		color: #fff;
	}

	.textarea_box {
		min-height: 100upx;
		width: 100%;
		border: 1upx solid #eee;
		border-radius: 10upx;
		padding: 20upx;
		box-sizing: border-box;
	}

	.textarea_box textarea {
		font-size: 24upx;
		height: 150upx;
		width: 100%;
	}

	.bottom_btn {
		height: 100upx;
		width: 100vw;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		line-height: 100upx;
		display: flex;
		justify-content: flex-end;
		padding: 0 30upx;
		z-index: 100;
		box-sizing: border-box;
	}

	.bottom_btn .moneys {
		font-size: 32upx;
		margin-right: 100upx;
	}

	.bottom_btn .btns {
		font-size: 26upx;
		height: 50upx;
		line-height: 50upx;
		padding: 0 20upx;
		text-align: center;
		border-radius: 8upx;
		margin-top: 30upx;
		color: #FFFFFF;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 150;
		transition: all 0.3s;
	}

	.coupon .buyong {
		line-height: 80upx;
		padding: 0 4%;
		text-align: right;
		color: #999;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 10;
		opacity: 0.7;
	}

	.scrolls {
		width: 100vw;
		height: 55vh;
		z-index: 500;
	}

	.shop {
		padding: 20upx;
		display: flex;
		justify-content: flex-start;
		position: relative;
		background-color: #fff;
		box-shadow: 0upx 0upx 10upx #ddd;
		border-radius: 10upx;
	}

	.shop .shop_img {
		width: 120upx;
		height: 120upx;
		display: block;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 8upx;
	}

	.shop_center {
		overflow: hidden;
		margin-left: 20upx;
	}

	.shop_center .shop_name {
		font-size: 28upx;
		color: #333;
		font-weight: bold;
	}

	.shop_center .shop_address {
		font-size: 24upx;
		color: #333;
		margin-top: 40upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.shoucang {
		width: 80upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 20upx;
		top: 50%;
		transform: translateY(-50%);
	}

	.shoucang .sc_icons text {
		font-size: 45upx;
		color: #999;
	}

	.shoucang .sc_text {
		font-size: 22upx;
		color: #333;
		font-weight: bold;
	}

	.order_ewm {
		width: 100%;
		height: 380upx;
		padding: 20upx 10upx;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0upx 0upx 10upx #ddd;
		margin-top: 20upx;
	}

	.ewm_title {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		font-weight: bold;
	}

	.center_ewm {
		height: 300upx;
		width: 300upx;
		margin: 0 auto;
	}

	.center_ewm image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.shouhou {
		border: 1upx solid #ddd;
		color: #999 !important;
		font-weight: normal !important;
	}
</style>